import React from 'react';
import "@/style/Message.scss"
import tipSrc from '@/assets/images/tip.gif'

class Message extends React.Component {
  constructor(props) {
    super(props)
    this.state= {
        systemInfo: [
          {message: '游戏即将开始 ~', options: '系统提示'},
          {message: "黑棋先手，请点击棋盘下第一手", options: "系统提示"}
        ]
    }
    this.dealMessage= this.dealMessage.bind(this)
  }
  componentDidUpdate(prevProps, prevState) {
    if(prevProps.postion!== this.props.postion || prevProps.over!== this.props.over) {
      this.dealMessage()
    }
  }
  dealMessage() {
    if(!this.props.over) {
      const message = `位置 ${this.props.postion}`
      // console.log('message:', this.props.postion)
      const options = this.props.blackIsNext?'白棋':'黑棋' // 注意：blackIsNext为true时，意味着当前即将下棋者为黑棋，但该位置应该显示已下棋方，所以需要相反
      this.setState({
        systemInfo: this.state.systemInfo.concat({message:message,options:options})
      })
    } else {
      this.setState({
        systemInfo: this.state.systemInfo.concat({message:'游戏结束！',options:`获胜者为 ${this.props.blackIsNext?'白棋 ':'黑棋 '}`})
      })
    }
    setTimeout(() => {
      const div = document.getElementById("messageContext")
      div.scrollTop = div.scrollHeight + 100;
    }, 0);
  }
  render() {
    return (
      <div className="messageContainer">
        <span className="messagetitle">
          <img src={tipSrc} alt="喇叭"></img>
          <span>系统消息：</span>
        </span>
        <div className="messageInner" id="messageContext">
          <ul>
            {this.state.systemInfo.map((item,i) => (
              <li key={item.message}>
                <span style={{fontWeight:550}}>
                  <span>{item.options+' '}</span>
                  <span style={(i===0 || i===1 )?{display:'none'} : {display:'inline-block'}} className= {item.options==='黑棋'?'black':'white'}></span>
                  <span>{' ：'}</span>
                </span>
                <span>{item.message}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    )
  }
}

export default Message